<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01 函数的声明和调用</title>
    <style>
        /* 声明 */
        .one {
            color: pink;
        }
    </style>
</head>

<body>
    <h1 class="one">函数的声明和调用</h1>
    <input type="button" value="点一下" id="btn">
</body>
<script src="../common.js"></script>
<script>
    /*
        函数：就是具有某个功能的代码块
            * 可以实现对代码的复用：节约代码量，提高页面性能能和用户体验
            * 使代码更为简洁明了，一个块一个功能，方便使用和管理
            * 封装好的代码，可以在任意地方、时间，不限次数的使用
        
        函数：
            * 声明
                * 声明式
                    function 函数名 () {
                        // 代码块
                    }
                * 赋值式
                    var sum = function() { 写匿名函数(没有函数名的函数)即可
                        // 代码块
                    }

            * 调用
                * 普通方式
                    函数名();
                * 事件驱动式
                    * 节点.事件名 = function() {
                        函数名() // 入口    
                    }

                * 节点.onclick = 函数名; 不能写() 否则还没有点击就执行函数
    */

    // 声明式
    function show() {
        console.log("宋雨琦");
    }

    show(); // 调用

    // 赋值式
    var sum = function() {
        console.log(5 * 6);
    }

    sum(); // ()调用函数的意思，调用的地方叫做函数的入口 

    var btn = getid('btn');
    
    // 事件驱动式
    btn.onclick = sum;

    btn.onclick = function () {
        show();
    }

</script>

</html>